import { Button, Table, Modal, Typography, Tag, Space, Card, Skeleton } from "antd";
import { useNavigate } from "react-router-dom";
import { useEffect, useState } from "react";

// 模拟中医理疗馆产品文章数据
const mockArticles = [
    {
        id: 1,
        productName: "艾灸养生套餐",
        category: "艾灸疗法",
        publishDate: "2023-09-10",
        status: "已发布",
        views: 328,
        content: `
      <h3>艾灸养生套餐详情</h3>
      <p>本套餐采用三年陈艾，结合传统艾灸手法，针对不同体质定制个性化艾灸方案。</p>
      <p>包含以下项目：</p>
      <ul>
        <li>全身经络艾灸（45分钟）</li>
        <li>穴位推拿按摩（30分钟）</li>
        <li>艾草泡脚（20分钟）</li>
        <li>养生茶饮用</li>
      </ul>
      <p>功效：温经散寒、调和气血、增强免疫力，适合寒湿体质人群。</p>
    `
    },
    {
        id: 2,
        productName: "推拿正骨疗程",
        category: "推拿疗法",
        publishDate: "2023-09-05",
        status: "已发布",
        views: 256,
        content: `
      <h3>推拿正骨疗程详情</h3>
      <p>由拥有10年以上经验的中员工主理，结合传统中医推拿与现代正骨技术。</p>
      <p>适用症状：</p>
      <ul>
        <li>颈椎、腰椎不适</li>
        <li>关节错位与疼痛</li>
        <li>肌肉劳损与紧张</li>
        <li>体态矫正</li>
      </ul>
      <p>疗程建议：每周2-3次，10次为一疗程，效果更佳。</p>
    `
    },
    {
        id: 3,
        productName: "中药熏蒸护理",
        category: "中药疗法",
        publishDate: "2023-08-28",
        status: "已发布",
        views: 189,
        content: `
      <h3>中药熏蒸护理详情</h3>
      <p>采用祖传秘方配置的中药包，通过蒸汽熏蒸方式使药物渗透肌肤，达到治疗效果。</p>
      <p>中药成分：</p>
      <ul>
        <li>当归、川芎 - 活血通络</li>
        <li>艾叶、生姜 - 驱寒除湿</li>
        <li>丹参、红花 - 促进循环</li>
      </ul>
      <p>注意事项：孕妇、高血压患者及皮肤破损者慎用。</p>
    `
    },
    {
        id: 4,
        productName: "针灸减肥方案",
        category: "针灸疗法",
        publishDate: "2023-08-15",
        status: "草稿",
        views: 0,
        content: `
      <h3>针灸减肥方案详情</h3>
      <p>结合传统针灸与耳穴疗法，调节内分泌，促进新陈代谢，达到健康减肥效果。</p>
      <p>治疗周期：</p>
      <ul>
        <li>每周3次针灸治疗</li>
        <li>配合耳穴压豆持续刺激</li>
        <li>专业营养师提供饮食建议</li>
      </ul>
      <p>预期效果：一个疗程（30天）可减重3-8公斤，且不易反弹。</p>
    `
    }
];

export const Article = () => {
    const navigate = useNavigate();
    const [selectedArticle, setSelectedArticle] = useState(null);
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [isShow, setIsShow] = useState(true);
    // 打开文章详情弹窗
    const showArticleDetail = (article) => {
        setSelectedArticle(article);
        setIsModalVisible(true);
    };

    // 表格列定义
    const columns = [
        {
            title: "产品名称",
            dataIndex: "productName",
            key: "productName",
            render: (text, record) => (
                <Typography.Link onClick={() => showArticleDetail(record)}>
                    {text}
                </Typography.Link>
            )
        },
        {
            title: "类别",
            dataIndex: "category",
            key: "category",
            render: (category) => {
                // 根据不同类别显示不同颜色的标签
                const colorMap = {
                    "艾灸疗法": "orange",
                    "推拿疗法": "green",
                    "中药疗法": "purple",
                    "针灸疗法": "blue"
                };
                return <Tag color={colorMap[category] || "default"}>{category}</Tag>;
            }
        },
        {
            title: "发布日期",
            dataIndex: "publishDate",
            key: "publishDate"
        },
        {
            title: "状态",
            dataIndex: "status",
            key: "status",
            render: (status) => (
                <Tag color={status === "已发布" ? "success" : "default"}>
                    {status}
                </Tag>
            )
        },
        {
            title: "浏览量",
            dataIndex: "views",
            key: "views"
        },
        {
            title: "操作",
            key: "action",
            render: (_, record) => (
                <Space size="middle">
                    <Button size="small" type="primary">发布</Button>
                    {/* <Typography.Link
                        onClick={() => showArticleDetail(record)}
                        style={{ color: '#1890ff' }}
                    >
                        查看
                    </Typography.Link> */}
                </Space>
            )
        }
    ];
    // 模拟加载状态
    useEffect(() => {
        const timer = setTimeout(() => {
            setIsShow(false);
        }, 2000);
        return () => clearTimeout(timer);
    }, []);
    return (
       <div>
        {isShow?( <Skeleton paragraph={{ rows: 10 }} active></Skeleton>):(
  <div>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                <div style={{ marginBottom: 10, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                    <div>
                        <Typography.Title level={2} style={{ marginBottom: 5 }}>文章管理</Typography.Title>
                        <Typography.Text type="secondary">显示产品的文章信息</Typography.Text>
                    </div>

                </div>

                <Button
                    type="primary"
                    onClick={() => navigate("/article/addArticle")}
                    icon={<span>+</span>}
                >
                    新增文章
                </Button>
            </div>
            <Card>
                <Table
                    columns={columns}
                    dataSource={mockArticles}
                    rowKey="id"
                    pagination={{ pageSize: 10 }}
                    bordered
                    scroll={{ x: 768 }}
                />
            </Card>



            {/* 文章详情弹窗 */}
            <Modal
                title={selectedArticle?.productName}
                open={isModalVisible}
                onCancel={() => setIsModalVisible(false)}
                footer={[
                    <Button key="close" onClick={() => setIsModalVisible(false)}>
                        关闭
                    </Button>
                ]}
                style={{top:50}}
                width={700}
               
                destroyOnHidden 
            >
                {selectedArticle && (
                    <div
                    className="modal-box"
                        dangerouslySetInnerHTML={{ __html: selectedArticle.content }}
                        style={{ lineHeight: 1.8, fontSize: 14 }}
                    />
                )}
            </Modal>
        </div>
        )}
       </div>
      
    );
};
